<template>
    <div>
        <Modal
            v-model="declareResultModal"
            width="746"
            class="col-2"
            :closable="false"
        >
            <div slot="header">
                {{ titleName }}
                <Icon class="f-fr" type="ios-close" @click="closeModel"/>
            </div>
            <Table :columns="columns" :data="dataList"></Table>
            <div slot="footer">
                <Button type="default" @click="declareResultModal = false" v-if="grade === 'error'">关闭</Button>

                <Button type="primary" @click="continueDeclare" v-if="grade === 'warn' && titleName === '申报失败'">继续申报</Button>
                <Button type="default" @click="declareResultModal = false" v-if="grade === 'warn' && titleName === '申报失败'">取消申报</Button>

                <Button type="primary" @click="continueUpdate" v-if="grade === 'warn' && titleName === '修改失败'">继续修改</Button>
                <Button type="default" @click="declareResultModal = false" v-if="grade === 'warn' && titleName === '修改失败'">取消修改</Button>
            </div>
        </Modal>
        <sendResModal ref="sendResModalRef"/>
    </div>
</template>

<script>
import { sendManifestToSingleWindow } from '@/api/manifest.js'
import sendResModal from './sendResModal'

export default {
    name: 'DeclareFailure',
    components: {
        sendResModal
    },
    data () {
        return {
            declareResultModal: false,
            titleName: '',
            grade: '', // 两种情况 error warn
            dataList: [],
            obj: {},
            columns: [
                {
                    title: '批次号/提（运）单号',
                    key: 'relNo'
                },
                {
                    title: '表名',
                    key: 'className'
                },
                {
                    title: '字段名',
                    key: 'fieldName',
                    render: (h, params) => {
                        return h('div', [
                            h('span', [
                                h('Poptip', {
                                    props: {
                                        trigger: 'hover',
                                        confirm: false,
                                        content: params.row.fieldName,
                                        size: 'small'
                                    },
                                    style: {
                                        display: 'inline-block',
                                        width: '100%',
                                        overflow: 'hidden',
                                        textOverflow: 'ellipsis',
                                        whiteSpace: 'nowrap'
                                    }
                                }, params.row.fieldName)
                            ])
                        ])
                    }
                },
                {
                    title: '错误原因',
                    key: 'message',
                    render: (h, params) => {
                        return h('div', [
                            h('span', [
                                h('Poptip', {
                                    props: {
                                        trigger: 'hover',
                                        confirm: false,
                                        content: params.row.message,
                                        size: 'small'
                                    },
                                    style: {
                                        display: 'inline-block',
                                        width: '100%',
                                        overflow: 'hidden',
                                        textOverflow: 'ellipsis',
                                        whiteSpace: 'nowrap'
                                    }
                                }, params.row.message)
                            ])
                        ])
                    }
                }
            ]
        }
    },

    methods: {
        init (data, obj, titleName) {
            this.titleName = titleName
            this.grade = data.grade
            this.dataList = data.list
            this.obj = obj
            this.declareResultModal = true
        },

        closeModel () {
            this.declareResultModal = false
        },

        continueDeclare () {
            this.obj.continueFlag = 'Y'
            sendManifestToSingleWindow(this.obj).then(res => {
                this.$refs.sendResModalRef.init(res.data, this.obj)
                this.closeModel()
            })
        },

        continueUpdate () {
            this.obj.continueFlag = 'Y'
            sendManifestToSingleWindow(this.obj).then(res => {
                this.$refs.sendResModalRef.init(res.data, this.obj)
                this.closeModel()
            })
        }
    }
}
</script>

<style scoped>

</style>
